import React from 'react'
import { Table, Space, Button } from 'antd';
import type { ColumnsType } from 'antd/es/table'
import { usePageInfo } from '@/hooks'

type Props = {}

interface DataType {
    key: React.Key;
    name: string;
    age: number;
    address: string;
    description: string;
}

const columns: ColumnsType<DataType> = [
    {
        title: '序号',
        dataIndex: 'name',
        key: 'name',
        render: (text, row, index) => {
            return <span>
                {index + 1}
            </span>
        }
    },
    { title: '装备名称', dataIndex: 'name', key: 'name' },
    {
        title: '图标',
        dataIndex: 'icon',
        key: 'icon',
        render: (img) => {
            return <img style={{
                width: 45,
                height: 45
            }} src={img} alt="" />
        }
    },
    { title: '星级', dataIndex: 'star', key: 'star' },
    {
        title: '操作',
        dataIndex: '',
        key: 'x',
        render: () => <Space size="middle">
            <Button type="primary">编辑</Button>
            <Button type="primary" danger>删除</Button>
        </Space>
    },
]

export default function ItemTable({ }: Props) {
    const { list, total, changePage } = usePageInfo("/rest/items")
    return (
        <Table
            columns={columns}
            onChange={changePage}
            pagination={{
                total,
                defaultPageSize: 5,
                showQuickJumper: true,
                pageSizeOptions: ['5', '8', '10', '15']
            }}
            dataSource={list}
            expandable={{
                expandedRowRender: (record: any) => <div className='center' style={{ margin: 0 }}>
                    <p>
                        { record.desc }   
                    </p>
                    <p>
                        { record.detail }   
                    </p>
                </div>
            }}
        />
    )
}